<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue';

const el = ref(null);
const props = defineProps({
  item: { type: Object },
  scale: { type: Number, default: 1 },
  offset: { type: Object, default: () => ({ x: 0, y: 0 }) },
  active: { type: Boolean },
  resize: { type: Array, default: () => [] }, // ['lt', 'rb']
  move: { type: Boolean },
});

const emits = defineEmits(['update:item', 'update:offset', 'active']);

const styles = computed(() => {
  return {
    zIndex: props.active ? '10' : '',
    position: 'absolute',
    top: `${(props.item.y || 0) + props.offset.y}px`,
    left: `${(props.item.x || 0) + props.offset.x}px`,
    width: `${props.item.width}px`,
    height: `${props.item.height}px`,
    transform: `scale(${props.scale})`,
  };
});

onMounted(() => {
  document.addEventListener('mouseup', onMouseup);
  document.addEventListener('mousemove', onMousemove);
});

onUnmounted(() => {
  document.removeEventListener('mouseup', onMouseup);
  document.removeEventListener('mousemove', onMousemove);
});

// const c
// 操作方式
const OPTIONS = {
  MOVE: 1, // 移动
  RB_RESIZE: 3, // 右下角缩放
};
// 操作方式
let option;
// 鼠标按下时的坐标
let downPoint = { x: 0, y: 0 };
// 鼠标按下时的历史坐标
let downOldPoint = { x: 0, y: 0 };

/** @事件 选中操作 */
function onActive() {
  emits('active');
}

/** @事件 点击操作 */
function onOption(e, value) {
  option = value;
  downPoint = { x: e.clientX, y: e.clientY };
  downOldPoint = {
    x: props.item.x || props.offset.x,
    y: props.item.y || props.offset.y,
    width: props.item.width,
    height: props.item.height,
  };
}

/** @事件 鼠标抬起 */
function onMouseup(e) {
  if (!option) { return; }
  e.stopPropagation();
  e.preventDefault();

  downOldPoint = { x: 0, y: 0 };
  downPoint = { x: 0, y: 0 };
  option = null;
}

/** @事件 鼠标移动 */
function onMousemove(e) {
  if (!option) { return; }
  e.stopPropagation();
  e.preventDefault();

  const move = {
    x: e.clientX - downPoint.x,
    y: e.clientY - downPoint.y,
  };

  if (option === OPTIONS.MOVE) {
    // 移动
    if (props.item.x || props.item.y) {
      const item = props.item;
      item.x = downOldPoint.x + move.x;
      item.y = downOldPoint.y + move.y;
      emits('update:item', item);
    } else {
      const item = props.offset;
      item.x = downOldPoint.x + move.x;
      item.y = downOldPoint.y + move.y;
      emits('update:offset', item);
    }
  } else if (option === OPTIONS.RB_RESIZE) {
    // 右下角缩放
    const item = props.item;
    item.width = downOldPoint.width + move.x;
    item.height = downOldPoint.height + move.y;
    emits('update:item', item);
  }
}

</script>

<template>
  <div
    ref="el"
    class="MapEditorStage"
    :style="styles"
  >
    <div class="MapEditorStage-body">
      <img class="MapEditorStage-img" :src="item.src" @mousedown.stop="onActive"/>
      <!-- 移动框 -->
      <div
        v-if="active"
        class="MapEditorStage-border"
        @mousedown.stop="($event) => onOption($event, OPTIONS.MOVE)"
      ></div>
      <!-- 右下角拉伸点 -->
      <div
        v-if="active"
        class="MapEditorStage-rb"
        @mousedown.stop="($event) => onOption($event, OPTIONS.RB_RESIZE)"
      ></div>
      <slot></slot>
    </div>
  </div>
</template>

<style scoped>
.MapEditorStage {
  transform-origin: top left;
  position: absolute;
}
.MapEditorStage-body {
  position: relative;
  height: 100%;
  width: 100%;
}
.MapEditorStage img {
  width: 100%;
  height: 100%;
}
.MapEditorStage-lt {
  background-color: white;
  position: absolute;
  cursor: nw-resize;
  border-radius: 6px;
  width: 10px;
  height: 10px;
  left: -10px;
  top: -10px;
  
}
.MapEditorStage-rb {
  background-color: white;
  position: absolute;
  cursor: nw-resize;
  border-radius: 6px;
  width: 10px;
  height: 10px;
  bottom: -10px;
  right: -10px;
}
.MapEditorStage-border {
  position: absolute;
  cursor: move;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  border: 2px dashed white;
  left: 0;
  top: 0;
}
</style>